<template>
  <up-tabbar :value="props.currentIndex" @change="handleTabChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="true" activeColor="#12C284" inactiveColor="#C0C0C0" backgroundColor="#FFFFFF" borderColor="#E5E5E5">
    <!-- 首页 -->
    <up-tabbar-item :name="0" :text="useT('首页')">
      <template #active-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/home-active.png'" mode="aspectFit" />
      </template>
      <template #inactive-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/home.png'" mode="aspectFit" />
      </template>
    </up-tabbar-item>

    <!-- U卡 -->
    <up-tabbar-item :name="1" :text="useT('U卡')">
      <template #active-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/ucard-active.png'" mode="aspectFit" />
      </template>
      <template #inactive-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/ucard.png'" mode="aspectFit" />
      </template>
    </up-tabbar-item>

    <!-- 链接 -->
    <up-tabbar-item :name="2" mode="midButton" :icon="'/static/tabBar/link.png'"></up-tabbar-item>

    <!-- 钱包 -->
    <up-tabbar-item :name="3" :text="useT('钱包')">
      <template #active-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/wallet-active.png'" mode="aspectFit" />
      </template>
      <template #inactive-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/wallet.png'" mode="aspectFit" />
      </template>
    </up-tabbar-item>

    <!-- 我的 -->
    <up-tabbar-item :name="4" :text="useT('我的')">
      <template #active-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/mine-active.png'" mode="aspectFit" />
      </template>
      <template #inactive-icon>
        <image class="tabbar-icon" :src="'/static/tabBar/mine.png'" mode="aspectFit" />
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { useT } from '@/utils/i18n.js';

// 定义 props
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0
  }
});

// 页面路径配置
const pagePaths = ['pages/tabBar/home', 'pages/tabBar/ucard', 'pages/tabBar/link', 'pages/tabBar/wallet', 'pages/tabBar/mine'];

// 处理 tab 切换
const handleTabChange = (index) => {
  const targetPage = pagePaths[index];
  if (targetPage) {
    // 使用 uni.switchTab 进行 tab 页面切换
    const url = targetPage.startsWith('/') ? targetPage : `/${targetPage}`;
    uni.switchTab({
      url,
      fail: (err) => {
        console.error('切换 tab 失败:', err);
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        });
      }
    });
  }
};
</script>

<style lang="scss" scoped>
:deep(.u-tabbar-item__icon--mid-button) {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.u-tabbar-item--mid-button) {
  display: block;
  transform: translateY(-20px);
  .u-icon__img {
    width: 40px !important;
    height: 40px !important;
  }
}
.tabbar-icon {
  width: 44rpx;
  height: 44rpx;
}
</style>
